<!--服务中、服务前问卷组件-->
<template>
	<view class="questionnaire-components">
		<view class="questionnaire-container">
			<!--问题详情-->
			<view class="question-container">
				<view class="question-type">
					{{ questionnaireInfo.name || "-" }}
				</view>
				<!--问题进度条-->
				<view class="line mt100">
					<tn-line-progress :percent="currPercentage" active-color="#FFA651"
					                  inactive-color="#F8ECDF"></tn-line-progress>
					<!--题目数量-->
					<view class="question-nums mt15">
						<view>第{{ currQuesIndex || 1 }}题</view>
						<view>共{{ maxSubjectNo || 1 }}题</view>
					</view>
				</view>
				<!--当前问题-->
				<view class="curr-ques mt70">
					<view class="ques-title">{{ currQuesInfo.name || "-" }}</view>
					<!--题目可填类型-->
					<view class="ans-container mt60">
						<!--单选-->
						<view class="list-block mb40"
						      :class="[{'is-chosen': currChosen === index}]"
						      v-for="(item,index) in currQuesInfo.option"
						      :key="index" :data-value="item.label"
						      @click="(e)=>chooseItem(e,index)">
							{{ item.label || '-' }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--按钮组-->
		<view class="btn-group mt50">
			<view class="btn-view" v-if="currQuesIndex!==1">
				<tn-button shape="round" color="#0CC38B" plain border-color="#38D7A6" height="90" font-size="34"
				           width="100%" @click="changeQues('prev')">
					上一题
				</tn-button>
			</view>
			<view class="btn-view" :class="[{'ml80':currQuesIndex !== 1}]"
			      v-if="currQuesIndex !== maxSubjectNo">
				<tn-button shape="round" :custom-style="successBtnStyle" width="100%" height="90" font-size="34"
				           @click="changeQues('next')">
					下一题
				</tn-button>
			</view>
			<view class="btn-view" :class="{'ml80':maxSubjectNo !== 1}" v-else>
				<tn-button shape="round" class="ml80" width="100%" height="90" font-size="34"
				           :custom-style="successBtnStyle"
				           @click="changeQues('submit')">
					提交
				</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
import {successBtnStyle} from "@/util/common";
import {questionnaireInfo} from "@/util/questionnaire";

export default {
	name: "questionnaireComponents",
	computed: {
		successBtnStyle() {
			return successBtnStyle;
		}
	},
	props: {
		id: {
			type: String,
		}
	},
	watch: {
		id: {
			handler(val, oldVal) {
				if (val) {
					let data = questionnaireInfo.filter((item, index) => {
						return item.id === val;
					});
					if (data && data.length > 0) {
						this.questionnaireInfo = data[0];
						this.currQuesInfo = data[0].obj[this.currQuesIndex - 1];
						this.maxSubjectNo = data[0].obj.length;
						this.countPercent();
					}
				}
			}
		}
	},
	data() {
		return {
			currPercentage: 0, //当前进度
			currQuesInfo: {}, // 当前展示的问题信息
			questionnaireInfo: {}, //当前获取到的问卷信息
			currQuesIndex: 1, //当前题号
			currChosen: "", //当前选择的题目选项
			routeQuery: {}, //路由链接上的参数
			maxSubjectNo: 1, //最大题目数
			ansInfo: [], //已选的题目答案
		};
	},
	methods: {
		// 点击题目选项
		chooseItem(e, index) {
			this.currChosen = index;
		},
		// 上一题、下一题、完成评测
		changeQues(type) {
			if (type !== "prev") {
				if (this.currChosen === "") {
					uni.showToast({
						title: "请选择答案再进行下一步",
						icon: "none",
					});
					return;
				}
			}
			if (type === "next") { //下一题
				// 储存当前的题目和答案
				let obj = {
					label: this.currQuesInfo.name,
					value: this.currQuesInfo.option[this.currChosen].label
				};
				this.ansInfo[this.currQuesIndex - 1] = {...obj};
				this.currQuesIndex++;
				this.toNewQuestion();
			} else if (type === "prev") { //上一题
				this.currQuesIndex--;
				this.toNewQuestion();
			} else { //完成测评
				// 储存当前的题目和答案
				let obj = {
					label: this.currQuesInfo.name,
					value: this.currQuesInfo.option[this.currChosen].label
				};
				this.ansInfo[this.currQuesIndex - 1] = {...obj};
				
				let userInfo = uni.getStorageSync("userInfo");
				let contract = uni.getStorageSync("contractImgFileName");
				let data = {
					name: this.questionnaireInfo.name,
					contract: contract, //知情书图片名称
					userInfo: userInfo,
					value: this.ansInfo
				};
				this.$emit("isFinish", data);
			}
			this.currChosen = ""; //清空选中的值
		},
		// 获取新的题目信息
		toNewQuestion() {
			this.currQuesInfo = this.questionnaireInfo.obj[this.currQuesIndex - 1];
			this.countPercent();
		},
		// 计算百分比
		countPercent() {
			this.currPercentage = (+this.currQuesIndex / +this.maxSubjectNo) * 100;
		}
	},
};
</script>

<style lang="scss">
.questionnaire-components {
	.questionnaire-container {
		padding: 0 85rpx;
		
		.question-container {
			background: #FFFFFF;
			border-radius: 32rpx;
			text-align: center;
			width: 100%;
			
			
			.question-type {
				background: #EAF8F3;
				border-radius: 0rpx 0rpx 30rpx 30rpx;
				padding: 18rpx 72rpx;
				width: fit-content;
				display: inline-block;
				font-size: 34rpx;
				font-weight: 500;
				color: #0CC38B;
			}
			
			.line {
				.u-percentage-slot {
					width: 100%;
					background: linear-gradient(51deg, #FF952F 0%, #FFC083 100%);
				}
				
				.question-nums {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					font-weight: 400;
					color: #333333;
					line-height: 30rpx;
				}
			}
			
			.curr-ques {
				.ques-title {
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;
					line-height: 47rpx;
				}
				
				.ans-container {
					text-align: center;
					
					.list-block {
						display: inline-block;
						width: 500rpx;
						background: #F0FBF6;
						border-radius: 72rpx 72rpx 72rpx 72rpx;
						padding: 20rpx 0;
						font-size: 36rpx;
						color: #444444;;
						cursor: pointer;
					}
					
					.is-chosen {
						background: #FFA751;
						color: #FFFFFF;
						font-weight: bold;
					}
					
					.text-area-input {
						text-align: left;
						
						.u-textarea {
							height: 275rpx;
							font-size: 36rpx;
							font-weight: 500;
							background: #F6F6F6;
							border-radius: 32rpx;
							border: none;
							overflow: auto;
						}
					}
				}
			}
			
		}
	}
	
	.btn-group {
		width: 100%;
		position: fixed;
		padding: 18rpx 32rpx;
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		bottom: 0;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		
		.btn-view {
			flex: 1;
		}
	}
}
</style>
